元素選取器

在網頁中，無論是透過 JavaScript 或是 CSS 有一套共用的選取器，這邊挑些常見的來說吧

1. id 選取：在 id 前面加個 # 字號，#id
2. 類選取：在 class 前面加 . 字號 .class
3. 元素選取：直接寫元素名稱 div
4. 全部選取：*
5. 子代選取器：在父選取器後添加一個 > 字號，將會選取父元素下一層適配的元素 #id > .class
6. 後代選取器：在父選取器後天加一個空格，將會選取所有後代適配的元素 #id div
7. 屬性選取器：透過[]來填寫你要的屬性 input[type='text']
8. 偽類選取器：偽類為在指定的選取元素中額外添加些條件來進行選取
9. 偽元素選取器：在元素內的特殊位置進行額外設定

由於偽類和偽元素能提的東西過多，因此我們這邊額外拉出來講

偽類選取器

1. 結構偽類：通常此類為選取指定元素的相關元素
   a. p:first-child：所有作為父元素第一個子元素的 p 元素
   b. p:last-child：所有作為父元素最後一個子元素的 p 元素
   c. p > span:first-of-type：選擇 p 元素子代的第一個 span 元素
   d. p > span:nth-of-type(n)：選擇 p 元素子代的第 n 個 span 元素
2. 描述偽類：通常此類為選取指定選取器的某個狀態下的樣式
   a. input:focus：當 input 元素被聚焦時
   b. input:checked：當 input 元素被勾選時，通常配合 checkbox 或 radio
   c. input:disabled：當 input 元素被禁止時
3. 否定偽類：將某個條件特別取消， p:not(.special) 為選取所有 p 元素除了類名為 special

偽元素選取器

1. p::before 或 p::after：在 p 元素的內容之前或是之後添加一個假元素，當添加 content 屬性後即會生成一個透過 CSS 產生的元素

p::before {
    content: '' //這邊也可以輸入文字或是 unicode
}

2. p:first-line：選取在 p 元素的第一行元素，可以用來像是加粗字體或是加大字體等等效果，通常在內容型網站較有可能使用
3. p::first-letter：選取在 p 元素的第一個字母，一樣為內容型網站較有機會使用

組合選取

1. div.container：當我們把兩個選取器連在一起時即為 and 的效果，像這邊為類名是 container 的 div 元素
2. h1, h2, h3：我們可以透過透號將會需要同一組設定的選取器放在一起，就不需要一直複製貼上了

權重引發的血案

相信權重問題只要打開任何一篇CSS 教學或介紹都絕對會提到，個人開發的時候還好說，基本上樣式表都是自己套的，差別只在會不會有第三方套件需要覆蓋；但若多人開發或是交接別人的舊專案一但樣式權重不明確或是分散於各地，最後就會看到 !important 來無視前面的全部權重設定，最慘的狀況會變成我 !important 你的 !important，為了避免這種問題我們還是好好了解權重的設定吧。

權重分級

正常來說，我們會把權重分為四個等級 (0,0,0,0) 同等級的權重在高也不會進位影響到下一等級的權重，當分數相等時會後蓋前，其中四個等級如下

1. 行內樣式：寫在元素內 style 屬性的樣式，通常他會是最高等的 (1,0,0,0)
2. ID 選取器：ID 選取器為二等權重 (0,1,0,0)
3. 類選取器、屬性選取器、偽類選取器：這些皆為三等權重 (0,0,1,0)
4. 元素選取器、偽元素選取器：四等權重，為 (0,0,0,1)
5. * 通用選取器：通用選取器的權重為 (0,0,0,0) 基本上有寫的東西都會覆蓋過去，通常這邊需要注意會不會跟 reset.css 之類的初始化 CSS 起衝突

權重算法

權重算法為只要出現在同一組選取器的權重就直接加上去，像是 #id > div.class > p 這組權重為

1. #id 為 (0, 1, 0, 0)
2. div.class 為 (0, 0, 0, 1) + (0, 0, 1, 0)
3. p 為 (0, 0, 0, 1)

因此總權重為 (0, 1, 1, 2)

什麼是 !important

!important 為寫在 CSS 屬性內的一個後綴，效果是無視所有權重，直接將此屬性的效果套用上去，只會受到前後的 !important 影響，通常不建議使用